import type { PropType, VNode } from "vue";
import { FieldRule } from "@arco-design/web-vue";

interface IFormCol {
  span: number;
}

interface RenderFunc {
  (h: any, form: object): VNode;
}

export declare interface IFormColumn {
  label?: string;
  field?: string;
  required?: boolean;
  layout?: IFormCol;
  rules?: object;
  render?: RenderFunc;
}

export const formProps = {
  model: {
    type: Object,
    default: () => ({}),
  },
  rules: {
    type: Object as PropType<Record<string, FieldRule | FieldRule[]>>,
    default: () => ({}),
  },
  layoutRow: {
    type: Object,
    default: null,
  },
  column: {
    type: Array as PropType<IFormColumn[]>,
    default: () => [],
  },
  labelAlign: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
};

export const formItemProps = {
  column: {
    type: Object as PropType<IFormColumn>,
    default: () => ({}),
  },
  form: {
    type: Object,
    default: () => ({}),
  },
};

export const availFormKeys = [
  "model",
  "rules",
  "layout",
  "layout-row",
  "label-col-props",
  "wrapper-col-props",
  "label-align",
  "disabled",
  "auto-label-width",
  "id",
  "scroll-to-first-error",
].reduce((total: string[], item) => {
  if (item.includes("-")) {
    const t = item
      .split("-")
      .map((i, index) => (index > 0 ? i.slice(0, 1).toUpperCase() + i.slice(1).toLowerCase() : i))
      .join("");
    total.push(t);
  }
  total.push(item);
  return total;
}, []);

export const availableFormItemKeys = [
  "field",
  "label",
  "tooltip",
  "show-colon",
  "no-style",
  "disabled",
  "help",
  "extra",
  "required",
  "asterisk-position",
  "rules",
  "validate-status",
  "validate-trigger",
  "label-col-props",
  "wrapper-col-props",
  "hide-label",
  "hide-asterisk",
  "label-col-style",
  "wrapper-col-style",
  "row-props",
  "row-class",
  "content-class",
  "content-flex",
  "label-col-flex",
  "feedback",
  "label-component",
  "label-attrs",
].reduce((total: string[], item) => {
  if (item.includes("-")) {
    const t = item
      .split("-")
      .map((i, index) => (index > 0 ? i.slice(0, 1).toUpperCase() + i.slice(1).toLowerCase() : i))
      .join("");
    total.push(t);
  }
  total.push(item);
  return total;
}, []);

export const exposedKeys = ["validate", "validateField", "resetFields", "scrollToField", "clearValidate", "setFields"];
